<template>
  <i v-if="props.type === 'local'" :class="props.class" :style="style">
    <svg aria-hidden="true">
      <use :xlink:href="iconSvgHref" fill="currentColor" />
    </svg>
  </i>
  <i v-else-if="props.type === 'iconify'" :class="props.class" :style="style">
    <Icon :icon="props.name" />
  </i>
  <!-- <ElIcon v-else-if="props.type === 'el'" :class="props.iclass" :size="props.size" :color="props.color">
    <component :is="dynamicElIcon" />
  </ElIcon> -->
</template>

<script setup lang="ts">
// 引入 vue 相关函数
import { ref, computed, markRaw, reactive } from 'vue';

// 引入 vue 相关类型声明
import type { Component, CSSProperties } from 'vue';

// 引入 element-plus图标
import { ElIcon } from 'element-plus';

// 引入 element-plus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 引入 iconify图标库
import { Icon } from '@iconify/vue';

// 定义组件的props类型声明
interface Props {
  /** 图标类名 */
  class?: string;
  /** 图标名称 */
  name: string;
  /** 图标类型 el=element-plus图标、 local=本地svg图标、iconify=iconify图标 */
  type: string;
  /** 图标大小 */
  size?: string | number;
  /** 图标宽度 */
  width?: string | number;
  /** 图标高度 */
  height?: string | number;
  /** 图标颜色 */
  color?: string;
  /** 图标样式 */
  style?: string;
  /** i标签类名 */
  iclass?: string;
  /** i标签样式 */
  istyle?: string;
}

// 组件选项值初始化
defineOptions({ size: '14px' });

// 组件的props声明与默认值设置
const props = withDefaults(defineProps<Props>(), {});

// 图标SVG 地址声明与初始化
let iconSvgHref = ref('');

// 图标样式对象声明与初始化
let style = reactive({});

let dynamicElIcon = ref<Component | null>(null);

/**
 * @description 添加单位
 * @param {String | Number} value 值 100
 * @param {String} unit 单位 px em rem
 */
const addUnit = (value: string | number | undefined, unit = 'px') => {
  return !Object.is(Number(value), NaN) ? `${value}${unit}` : value;
};

// 本地svg图标处理
if (props.type == 'local') {
  // 设置引用
  iconSvgHref = computed(() => `#local-icon-${props.name}`);
}
// Element Plus 图标处理
else if (props.type == 'el') {
  // 动态加载 Element Plus 图标组件
  dynamicElIcon.value = markRaw(ElementPlusIconsVue[props.name as keyof typeof ElementPlusIconsVue]);
}
//iconify 图标样式对象声明与初始化
else if (props.type == 'iconify') {
  style = computed<CSSProperties>(() => {
    return {
      fontSize: addUnit(props.size),
      width: addUnit(props.width),
      height: addUnit(props.height),
      color: props.color,
    };
  });
}
</script>
